<template>
  <view class="calendar-container" :class="{ 'nav-bar': isNavBar }" :style="isNavBar ? { paddingTop: statusBarHeight + 'px' } : {}">
    <!-- Header Section -->
    <view class="header">
      <text class="title">待办</text>
      <view class="date-display">
        <text class="year-month">{{ currentYearMonth }}</text>
      </view>
    </view>

    <!-- Calendar Section -->
    <view class="calendar-section">
      <view 
        v-for="(day, index) in calendarDays" 
        :key="index" 
        class="day-item"
        :class="{ 'active-day': day.isActive }"
        @click="selectDay(index)">
        <text class="day-name" :class="{ 'day-name-active': day.isActive }">{{ day.name }}</text>
        <text class="day-number" :class="{ 'day-number-active': day.isActive }">{{ day.number }}</text>
      </view>
      <!-- 只有当选中的是今天时才显示"今"图标 -->
      <view class="today-indicator" v-if="showTodayIndicator">
        <text class="today-text">今</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CalendarSection",
  props: {
    // 是否作为固定导航栏
    isNavBar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 存储当前日期信息
      currentDate: new Date(),
      // 存储动态生成的日历数据
      calendarDays: [],
      // 控制"今"图标的显示
      showTodayIndicator: false,
      // 存储今天在数组中的索引
      todayIndex: -1,
      // 星期名称映射
      weekdayNames: ["日", "一", "二", "三", "四", "五", "六"],
      // 状态栏高度
      statusBarHeight: 0,
    }
  },
  computed: {
    // 计算当前年月显示
    currentYearMonth() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth() + 1
      return `${year}-${month < 10 ? "0" + month : month}`
    },
  },
  created() {
    // 组件创建时初始化日历数据
    this.initCalendarDays()

    // 获取状态栏高度
    if (this.isNavBar) {
      try {
        const systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = systemInfo.statusBarHeight || 0
      } catch (e) {
        console.error("获取系统信息失败", e)
      }
    }
  },
  methods: {
    // 初始化日历数据
    initCalendarDays() {
      const today = new Date()
      const todayDate = today.getDate()
      const todayDay = today.getDay() // 获取今天是星期几 (0-6)

      // 创建包含今天及前后三天的数组
      const days = []

      // 添加今天前三天的数据
      for (let i = 3; i > 0; i--) {
        const date = new Date(today)
        date.setDate(todayDate - i)

        days.push({
          date: date,
          name: this.weekdayNames[date.getDay()],
          number: date.getDate().toString(),
          isActive: false,
          isToday: false,
        })
      }

      // 添加今天的数据
      days.push({
        date: new Date(today),
        name: this.weekdayNames[todayDay],
        number: todayDate.toString(),
        isActive: true, // 默认今天是激活状态
        isToday: true,
      })

      this.todayIndex = 3 // 今天在数组中的索引为3（前面有3天）

      // 添加今天后三天的数据
      for (let i = 1; i <= 3; i++) {
        const date = new Date(today)
        date.setDate(todayDate + i)

        days.push({
          date: date,
          name: this.weekdayNames[date.getDay()],
          number: date.getDate().toString(),
          isActive: false,
          isToday: false,
        })
      }

      this.calendarDays = days

      // 默认选中今天，显示"今"图标
      this.showTodayIndicator = true
    },

    // 选择日期
    selectDay(index) {
      // 更新所有日期的激活状态
      this.calendarDays.forEach((day, i) => {
        day.isActive = i === index
      })

      // 只有当选中的是今天时，才显示"今"图标
      this.showTodayIndicator = index === this.todayIndex

      // 发出选择事件
      this.$emit("day-selected", {
        days: this.calendarDays,
        selectedDay: this.calendarDays[index],
      })
    },
  },
}
</script>

<style>
.calendar-container {
  width: 100%;
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* Header Styles */
.header {
  padding: 40rpx 40rpx 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(230, 230, 250, 0.8), rgba(255, 240, 245, 0.8));
}

.title {
  font-size: 71rpx;
  font-weight: 700;
  line-height: 99.4rpx;
  color: #111111;
}

.year-month {
  font-size: 47rpx;
  font-weight: 700;
  line-height: 65.8rpx;
  color: #333333;
}

/* Calendar Section */
.calendar-section {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 30rpx 60rpx;
  position: relative;
  margin-bottom: 40rpx;
  background: linear-gradient(135deg, rgba(230, 230, 250, 0.8), rgba(255, 240, 245, 0.8));
}

.day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 114rpx;
  height: 228rpx;
  justify-content: space-between;
  padding: 20rpx 0;
  border-radius: 30rpx;
}

.active-day {
  background-color: #7766E7;
  box-shadow: 0 6rpx 20rpx rgba(119, 102, 231, 0.26);
}

.day-name {
  font-size: 36rpx;
  font-weight: 400;
  line-height: 50.4rpx;
  color: #666666;
  margin-top: 20rpx;
}

.day-name-active {
  color: #FFFFFF;
}

.day-number {
  font-size: 35rpx;
  font-weight: 700;
  line-height: 49rpx;
  color: #333333;
  margin-bottom: 20rpx;
}

.day-number-active {
  color: #FFFFFF;
}

.today-indicator {
  position: absolute;
  bottom: -21rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 42rpx;
  height: 42rpx;
  background-color: #7766E7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.today-text {
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 42rpx;
}
</style>